<template>
  <el-row :gutter="10">
    <el-col :span="16">
      <el-card>
        <div class="title">
          <h3>今日设备运行状态</h3>
          <p class="ml">更新时间:2024年8月31日</p>
          <el-icon color="#86909c" style="margin-left: 5px"
            ><Refresh
          /></el-icon>
        </div>
        <div class="equipment">
          <div class="item">
            <h4 class="mt mb">充电桩使用率</h4>
            <img :src="flash" alt="" class="mt mb" />
            <h1 class="mb">72 / 95</h1>
            <div class="statistic-card">
              <el-statistic :value="9">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip
                      effect="dark"
                      content="当前有9台设备异常,请尽快处理"
                      placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    24%
                    <el-icon color="green">
                      <CaretTop />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <h4 class="mt mb">充电柜使用率</h4>
            <img :src="flash2" alt="" class="mt mb" />
            <h1 class="mb">655 / 1233</h1>
            <div class="statistic-card">
              <el-statistic :value="22">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip
                      effect="dark"
                      content="当前有9台设备异常,请尽快处理"
                      placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    24%
                    <el-icon color="red">
                      <CaretTop />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <h4 class="mt mb">充电站使用率</h4>
            <img :src="flash3" alt="" class="mt mb" />
            <h1 class="mb">2263 / 3398</h1>
            <div class="statistic-card">
              <el-statistic :value="47">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip
                      effect="dark"
                      content="当前有9台设备异常,请尽快处理"
                      placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    14%
                    <el-icon color="green">
                      <CaretTop />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h1>常用功能</h1>
          </div>
        </template>
        <div class="quick mt mb">
          <el-row>
            <el-col :span="4">
              <img :src="repair" alt="" />
              <p>设备维修</p>
            </el-col>
            <el-col :span="4">
              <img :src="daily" alt="" />
              <p>每日日报</p>
            </el-col>
            <el-col :span="4">
              <img :src="progress" alt="" />
              <p>任务进度</p>
            </el-col>
            <el-col :span="4">
              <img :src="total" alt="" />
              <p>营收占比</p>
            </el-col>
            <el-col :span="4">
              <img :src="money" alt="" />
              <p>营收统计</p>
            </el-col>
            <el-col :span="4">
              <img :src="remain" alt="" />
              <p>待办事项</p>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h1>能源统计</h1>
          </div>
        </template>
        <el-row>
          <el-col :span="8">
            <div ref="chartRef2" style="width: 100%; height: 400px"></div>
          </el-col>
          <el-col :span="16">
            <div ref="chartRef" style="width: 100%; height: 400px"></div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
          <div class="card-header">
            <h1>设备总览</h1>
          </div>
        </template>
        <div ref="chartRef3" style="width: 100%; height: 240px"></div>
      </el-card>
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h1>营收统计表</h1>
          </div>
        </template>
        <ul class="rankList">
          <li class="rankItem">
            <span
              class="rank"
              style="background-color: rgb(103, 194, 58); color: #fff"
              >1</span
            >
            <span class="storeName">广州</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="rankItem">
            <span class="rank" style="background-color: skyblue; color: #fff"
              >2</span
            >
            <span class="storeName">广州</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="rankItem">
            <span class="rank" style="background-color: orange; color: #fff"
              >3</span
            >
            <span class="storeName">广州</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="rankItem">
            <span class="rank">4</span>
            <span class="storeName">广州</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="rankItem">
            <span class="rank">5</span>
            <span class="storeName">武汉</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="red">
                <CaretBottom />
              </el-icon>
            </span>
          </li>
          <li class="rankItem">
            <span class="rank">6</span>
            <span class="storeName">武汉</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="red">
                <CaretBottom />
              </el-icon>
            </span>
          </li>
          <li class="rankItem">
            <span class="rank">7</span>
            <span class="storeName">武汉</span>
            <span class="sales">42,457</span>
            <span style="margin-left: 50px"
              >24%
              <el-icon color="red">
                <CaretBottom />
              </el-icon>
            </span>
          </li>
        </ul>
      </el-card>
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h1>故障报警</h1>
          </div>
        </template>
        <el-timeline style="max-width: 600px">
          <el-timeline-item timestamp="2018/4/12" placement="top" type="danger" :hollow="true">
            <el-card>
              <h4>矿业北路通讯中断</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" type="warning" :hollow="true">
            <el-card>
              <h4>黄河南路超出服务区域</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top" type="danger" :hollow="true">
            <el-card>
              <h4>6号机组异常断电</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import flash from '@/assets/flash.png';
import flash2 from '@/assets/flash2.png';
import flash3 from '@/assets/flash3.png';
import repair from '@/assets/repair.png';
import progress from '@/assets/progress.png';
import remain from '@/assets/remain.png';
import total from '@/assets/total.png';
import money from '@/assets/money.png';
import daily from '@/assets/daily.png';
import { useChart } from '@/hooks/useChart';
import { chartDataApi, chartDataApi2, chartDataApi3 } from '@/api/dashboard';
import { CaretTop } from '@element-plus/icons-vue';
// 基于准备好的dom，初始化echarts实例
const chartRef = ref(null);
const chartRef2 = ref(null);
const chartRef3 = ref(null);

const getData = async () => {
  const chartOptions: any = reactive({
    title: {
      text: '电量统计',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [],
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
      ],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}kw',
      },
    },
    series: [
      {
        name: '',
        type: 'line',
        data: [],
        lineStyle: {
          width: 4,
        },
        itemStyle: {
          color: 'purple',
          shadowBlur: 5,
          shadowColor: 'rgba(0,255,0,0.5)',
        },
        smooth: true,
      },
      {
        name: '',
        type: 'line',
        data: [],
        lineStyle: {
          width: 4,
        },
        itemStyle: {
          color: 'lightGreen',
          shadowBlur: 5,
          shadowColor: 'rgba(0,255,0,0.5)',
        },
        smooth: true,
      },
      {
        name: '',
        type: 'line',
        data: [],
        lineStyle: {
          width: 4,
        },
        itemStyle: {
          color: 'skyBlue',
          shadowBlur: 5,
          shadowColor: 'rgba(0,255,0,0.5)',
        },
        smooth: true,
      },
    ],
  });
  const res = await chartDataApi();
  chartOptions.legend.data = res.data.list.map((item: any) => item.name);
  for (let i = 0; i < res.data.list.length; i++) {
    chartOptions.series[i].data = res.data.list[i].data;
    chartOptions.series[i].name = res.data.list[i].name;
  }
  return chartOptions;
};
console.log('👿👿 👿 👿  import.meta.env.VITE_API_URL',import.meta.env.VITE_API_URL);

const getData2 = async () => {
  const chartOptions: any = reactive({
    legend: {
      top: 'bottom',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a}<br/>{b}:{c}',
    },
    series: [
      {
        name: '营收占比',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '50%'],
        roseType: 'area',
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
          },
        },
        data: [],
      },
    ],

    graphic: {
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '营收占比',
        fontSize: 20,
        fill: '#333',
      },
    },
  });
  const res = await chartDataApi2();
  console.log('👿👿👿👿 ~ getData2 ~ res:', res);
  chartOptions.series[0].data = res.data.list;
  console.log('👿 ~ getData ~ chartOptions:', chartOptions);
  return chartOptions;
};
const getData3 = async () => {
  const chartOptions: any = reactive({
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '闲置数', max: 65 },
        { name: '使用数', max: 160 },
        { name: '故障数', max: 300 },
        { name: '维修数', max: 380 },
        { name: '更换数', max: 520 },
        { name: '报废数', max: 250 },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [],
            name: '设备总览',
          },
        ],
      },
    ],
  });
  const res = await chartDataApi3();
  chartOptions.series[0].data[0].value = res.data.list;
  return chartOptions;
};
useChart(chartRef, getData); //组合式函数(hooks函数)只能在setup钩子中调用(某些情况也可以在onMounted中),
//且只能被同步调用,即不能放在请求中调用
useChart(chartRef2, getData2);
useChart(chartRef3, getData3);
</script>
<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  p {
    color: #86909c;
  }
}
.equipment {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  .item {
    h1 {
      font-size: 36px;
    }
  }
}
.quick {
  margin-top: 30px;
  text-align: center;
  p {
    margin-top: 10px;
    color: #333;
  }
}
.rankList {
  .rankItem {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    &:nth-child(even) {
      background-color: rgb(253, 246, 236);
    }
    .rank {
      display: inline-block;
      font-weight: bold;
      color: #666;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      line-height: 30px;
      text-align: center;
    }
    .storeName {
      flex-grow: 1;
      padding: 0 10px;
    }
    .sales {
      color: #666;
    }
  }
}
</style>
